import React, { useCallback, useState } from 'react';
import { Layout, Avatar, Menu, Input, Button, Modal, Form } from 'antd';
import { addOrganization, IOrganization } from './store/features/globalSlice'
import {
    UserOutlined,
    PlusOutlined,
    SearchOutlined
} from '@ant-design/icons';
import 'antd/dist/antd.css';
import './App.css';
import { useAppDispatch, useAppSelector } from './store/hooks';
import Detail from './pages/detail';
const { Header, Content, Sider } = Layout;

function App() {
    const { list } = useAppSelector((state) => state.global)
    const dispatch = useAppDispatch()
    const [current, setCurrent] = useState<number>(1)
    const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
    const [form] = Form.useForm()

    const handleAdd = (() => {
        const data: IOrganization = {
            id: list.length + 1,
            name: form.getFieldsValue().name,
            memberList: []
        }
        dispatch(addOrganization(data))
        setIsModalVisible(false)
    })

    return (
        <Layout>
            <Header className="header">
                <span>dataReachable</span>
                <span className="pull-right">
                    <Avatar
                        style={{ backgroundColor: 'rgb(71,141,165)', marginRight: 8 }}
                    >
                        YL
                    </Avatar>
                    Go to Dashboard
                </span>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <div className="side-user-info">
                        <Avatar
                            style={{ backgroundColor: 'rgb(71,141,165)', marginRight: 32 }}
                        >
                            Tian
                        </Avatar>
                        Kevin Tian
                    </div>
                    <Input style={{ width: '90%', margin: 8 }} placeholder="Search" prefix={<SearchOutlined />} />
                    <Menu mode="inline">
                        {
                            list.map((item: any, index: number) => {
                                return (
                                    <Menu.Item
                                        key={index}
                                        icon={<UserOutlined />}
                                        onClick={() => { setCurrent(index + 1) }}
                                        defaultChecked={index === 0}
                                    >
                                        {item.name}
                                    </Menu.Item>
                                )
                            })
                        }
                    </Menu>
                    <div className="side-add-button">
                        <Button style={{ width: '100%' }} type="text" icon={<PlusOutlined />} onClick={() => {setIsModalVisible(true)}}>Creat New Organization</Button>
                    </div>
                </Sider>
                <Layout style={{ padding: '0 24px 24px' }}>
                    <Content
                        className="site-layout-background"
                        style={{
                            padding: 24,
                            margin: 0,
                            minHeight: 280,
                        }}
                    >
                        <Detail id={current} />
                        <Modal title="Creat New Organization" visible={isModalVisible} onOk={handleAdd} onCancel={() => {setIsModalVisible(false)}}>
                            <Form form={form}>
                                <Form.Item name="name" label="Organization Name">
                                    <Input></Input>
                                </Form.Item>
                            </Form>
                        </Modal>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    )
}

export default App;